<template>
  <div>
    <div class="c-bg-white">
      <div class="c-flex-row c-ph24">
        <div class="c-fs24 c-fc-xblack c-fw600 c-p">讲师简介<span class="c-pa c-p-l0 c-p-bm4 c-w100 c-hh12 c-br6 theme-bg-10"></span></div>
      </div>
      <div class="c-contextX-scroll c-flex-row c-flexw-nowrap c-ml24 c-mt28">
        <div v-for="(item, index) in lecturersArr" :key="index" @click="clickLecturer(item)" :class="lecturersArr.length == 1 ? 'c-ww592':'c-ww440 c-mr24'" class="c-hh128 c-flex-shrink0 c-bg-fafafa c-br20 c-pl20 c-pr16 c-flex-row c-aligni-center">
          <img class="c-ww88 c-hh88 c-brp50" :src="$addXossFilter(item.lecturerAvatar, require('@/assets/defult_head.png'))" alt="">
          <div class="c-w0 c-flex-grow1 c-flex-column c-justify-center c-hh88 c-ml20">
            <div class="c-flex-row c-aligni-center">
              <div class="c-fs26 c-fc-xblack c-fw600 c-text-ellipsis1">{{item.lecturerName}}</div>
              <div v-if="item.answerId && item.ltAnswerStatus == 1 && item.isAnswererSelf == 0" class="c-fs18 c-fc-white c-ww72 c-hh28 c-br8 theme-bg c-flex-shrink0 c-flex-row c-flex-center c-ml6">可提问</div>
            </div>
            <div v-if="item.lecturerTitle" class="c-fs22 c-fc-sblack c-text-ellipsis1 c-mt-auto">{{item.lecturerTitle}}</div>
          </div>
          <div class="c-fc-xblack iconfont c-fs18 c-ml12">&#xe60e;</div>
        </div>
      </div>
    </div>
    <cj-popup v-model="showDetailModal" round :closeable="true" position="bottom" title="讲师介绍">
      <div class="c-ph24 c-pv24">
        <div class="c-maxh500 c-contexty-scroll">
          <div @click="goLecturerDetail(selectLecturerItem.lecturerId)" class="c-hh128 c-bg-fafafa c-br20 c-ph20 c-flex-row c-aligni-center">
            <img class="c-ww88 c-hh88 c-brp50" :src="$addXossFilter(selectLecturerItem.lecturerAvatar, require('@/assets/defult_head.png'))" alt="">
            <div class="c-w0 c-flex-grow1 c-flex-column c-justify-center c-hh88 c-ml20">
              <div class="c-fs26 c-fc-xblack c-fw600 c-text-ellipsis1">{{selectLecturerItem.lecturerName}}</div>
              <div v-if="selectLecturerItem.lecturerTitle" class="c-fs22 c-fc-sblack c-text-ellipsis1 c-mt-auto">{{selectLecturerItem.lecturerTitle}}</div>
            </div>
            <div class="c-fc-xblack iconfont c-fs18 c-ml12">&#xe60e;</div>
          </div>
          <div v-if="selectLecturerItem.desc" class="c-fs24 c-fc-xblack c-lh48 c-mt32 c-ws-pw c-wb-ba">{{selectLecturerItem.desc}}</div>
          <loading-status-tem :pt20="true" :noData="!selectLecturerItem.desc" :noDataText="'暂无简介'" noneImage="https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/empty_intro.png"></loading-status-tem>
        </div>
        <div v-if="selectLecturerItem.answerId && selectLecturerItem.ltAnswerStatus == 1 && selectLecturerItem.isAnswererSelf == 0" @click="goAskQuestion(selectLecturerItem.answerId)" class="c-fs28 c-fc-white c-hh64 c-br32 theme-bg c-flex-row c-flex-center c-mt32">{{questionCustom == 1 ? '预约' : '提问'}}</div>
      </div>
    </cj-popup>
  </div>
</template>

<script>
import LoadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
export default {
  name: "LecturerCom",
  components: {
    LoadingStatusTem
  },
  props: {
    lecturersArr: {
      type: Array,
      default: () => [],
    },
    courseId: {
      type: Number,
      default: 0
    },
  },
  data() {
    return {
      selectLecturerItem: '',
      questionCustom: localStorage.getItem("questionCustom"), //定制阿卡西线上学院
      showDetailModal: false,
    }
  },
  mounted() {
  },
  methods: {
    clickLecturer(cItem) {
      this.selectLecturerItem = cItem;
      this.showDetailModal = true;
    },
    // 免费提问
    goAskQuestion(answerId) {
      this.$routerGo(this, "push", {
        path: "/homePage/qa/questionDetail",
        query: {
          answerId: answerId,
          courseId: this.courseId,
          src: 2,
        }
      })
    },
    goLecturerDetail(lecturerId) {
      this.$routerGo(this, "push", {
        path: "/homePage/course/lecturerDetail",
        query: {
          lecturerId: lecturerId,
          courseId: this.courseId
        }
      })
    }
  },
  activated() {
    this.selectLecturerItem = "";
  },
  deactivated() {
    this.showDetailModal = false;
  }
}
</script>

<style lang="less" scoped>
</style>